在class component上
一開始必須得在construtor上導入state判斷視窗大小
是否大於或等於節點
此處是在於當視窗onload時判斷大小進而偵測state
this.state={
size: document.body.offsetWidth<769?true:false
}
之後為了縮放視窗時
能夠偵測視窗狀態,縮放大小時改變state
必須在componentDidMount做一個resize動作來重新偵測
window.onresize=()=>{
this.setState({
size:document.body.offsetWidth<769?true:false
});
}
當然在render內必須解構附值size
並給予布林值條件
const {size}=this.state;
const Size=size?'':<br/>;
此處即為dom縮放視窗後所要改變的目標物
即視窗大於769px後會加上
小於769時br標籤會拿掉
在改為function component後
首先一樣使用useState設定初始state:size
並給予改變size的函式setSize
const [size,setChbr]=useState(
document.body.offsetWidth<769?true:false
);
接著改寫視窗改變時的resize狀態
window.onresize=()=>{
setSsiez(
document.body.offsetWidth<769?true:false
);
};
此處因在function component的關係
不需要使用constructor與componentDidMount
最後給予判斷式
const Size=size?'':<br/>;